import React, { Component } from 'react'
import ThemeContext from './context';

export default class AppClass extends Component {
    state = {
        username:'lili',
        password:'',
        count:0,
        width:window.innerWidth
    }

    changeName = (e) => {
        this.setState({
            username:e.target.value
        })
    }

    changeAge = (e) => {
        this.setState({
            password:e.target.value
        })
    }

    plus = () => {
        this.setState({
            count:this.state.count+1
        })
    }

    resize = () => {
        this.setState({
            width:window.innerWidth
        })
    }

    //组件初次渲染完毕
    componentDidMount() {
        // document.title = this.state.count;
        window.addEventListener('resize',this.resize)
    }
    
    //状态改变完成之后
    componentDidUpdate(){
        // document.title = this.state.count;
    }
    //组件即将销毁
    componentWillUnmount() {
        window.removeEventListener('resize',this.resize);
    }
    

    render() {
        let {username,password,count,width} = this.state;
        return (
            <div>
                <input type="text" onChange={this.changeName} value={username}/>
                用户名：{username}
                <br/>

                <input type="text" onChange={this.changeAge} value={password}/>
                密码{password}

                <br/>

                {count}
                <button onClick={this.plus}>+</button>

                <br/>

                {width}宽度

                <ThemeContext.Consumer>
                    {(value) => {
                        return  <div style={value}>
                            context
                        </div>
                    }}
                </ThemeContext.Consumer>
            </div>
        )
    }
}
